<script setup>
import { defineProps, watch, ref, onMounted, onUnmounted, nextTick } from 'vue'
// import { ElButton, ElSwitch } from 'element-plus'


const props = defineProps({
    options: { type: Object, default: () => ({}) },
    apiData: { type: Object, default: () => ({}) },
    busStore: { type: Object, default: () => ({}) },
    privateStore: { type: Object, default: () => ({}) },
    ownStore: { type: Object, default: () => ({}) }
})
const options = ref(props.options)
// 监听配置项变化
watch(() => props.options, (newValue, oldValue) => {
    options.value = newValue
}, { deep: true })

// 监听接口数据变化
watch(() => props.apiData, (newValue, oldValue) => {
    console.log('接口数据变化：', newValue, oldValue)
}, { deep: true })

// 监听公用数据变化
watch(() => props.busStore, (newValue, oldValue) => {
    console.log('公用数据变化：', newValue, oldValue)
}, { deep: true })

// 监听私有数据变化
watch(() => props.privateStore, (newValue, oldValue) => {
    console.log('私有数据变化：', newValue, oldValue)
}, { deep: true })

</script>

<template>
    <div class="text_free" :style="{
        fontSize: options.fontSize,
        fontWeight: options.fontWeight,
        lineHeight: options.lineHeight,
        color: options.textColor,
        textAlign: options.textAlign,
        backgroundColor: options.backgroundColor,
        backgroundImage: options.backgroundImage ? `url(${options.backgroundImage})` : '',
        padding: options.padding,
    }" style="background-size: 100% 100%;">
        <!-- 文字渐变：级兼容 -->
        <div class="text_free_box" :style="{
            backgroundImage: `linear-gradient(${options.backgroundGradient})`,
            backgroundClip: 'text',
            color: 'transparent',
        }" style="-moz-background-clip: text; -webkit-background-clip: text;">
            {{ options.text }}
        </div>
    </div>
</template>

<style scoped lang="scss">
.text_free_box {
    display: inline;
}
</style>